<template>
  <div id="index">
    <navigationBar></navigationBar>
    <div class="section">
      <!-- 顶部显示图片 -->
      <div class="showImage">
        <img :src="topShowImage" alt />
      </div>
      <!-- 精选品牌 -->
      <div class="brand">
        <!-- 标题 -->
        <div class="brand_title">
          <!-- 精选标题 -->
          <div class="titleColor">
            <h4>精选品牌</h4>
            <span>Featured brand</span>
          </div>
          <!-- 查看更多 -->
          <div class="titleMore">
            <span>查看更多</span>
            <i class="el-icon-d-arrow-right"></i>
          </div>
        </div>
        <!-- 选项列表 -->
        <div class="brandList">
          <div
            class="brandOption"
            v-for="(item, index) in brandList"
            :key="index"
            @click="toBranddetail()"
          >
            <img :src="item" alt />
            <!-- 遮罩层 -->
            <div class="filter">
              <div class="examine">
                <p>葫芦娃救爷爷</p>
                <span class="goexamine">
                  前往查看
                  <i class="el-icon-d-arrow-right"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品推荐 -->
      <div class="commodity">
        <!-- 商品标题 -->
        <div class="commodity_title">
          <div class="titleColor">
            <h4>商品推荐</h4>
            <span>Recommended product</span>
          </div>
          <!-- 分类选项 -->
          <div class="titleOption">
            <span
              class="selectNape"
              v-for="(item, index) in titleOption_list"
              :key="index"
              :class="currentIndex == index ? 'activeOption' : ''"
              @click="switchover(index)"
              >{{ item }}</span
            >
          </div>
          <!-- 查看更多 -->
          <div class="titleMore">
            <span>查看更多</span>
            <i class="el-icon-d-arrow-right"></i>
          </div>
        </div>
        <!-- 商品列表 -->
        <div class="commodityList">
          <div
            class="productOption"
            v-for="(item, index) in commodityList"
            :key="index"
            @click="toGoodsdetail()"
          >
            <img :src="item" alt />
            <!-- 商品描述 -->
            <div class="describe">
              <span>￥90.0</span>
              <span>得力(deli) 佳宣A4复印纸办公白纸批发打...</span>
            </div>
            <!-- 商品标签 -->
            <div class="label">
              <p>分类A-01</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 公告通知 -->
      <div class="notice">
        <!-- 标题 -->
        <div class="noticeTitle">
          <!-- 公告红色标题 -->
          <div class="titleColor">
            <h4>公告通知</h4>
            <span>Announcement notice</span>
          </div>
          <!-- 查看更多 -->
          <div class="titleMore">
            <span>查看更多</span>
            <i class="el-icon-d-arrow-right"></i>
          </div>
        </div>
        <!-- 公告列表 -->
        <div class="noticeList">
          <!-- 公告选项 -->
          <div
            class="noticeOption"
            v-for="(item, index) in noticeList"
            :key="index"
            @click="toNoticedetail()"
          >
            <p>{{ item.title }}</p>
            <p>{{ item.date }}</p>
          </div>
        </div>
      </div>
    </div>
    <right></right>
    <foot></foot>
  </div>
</template>
<script lang="">
import Vue from "vue";
import right from "../components/common/right_logo";
import navigationBar from "../components/navigationBar.vue";
import foot from "../components/footer.vue";
export default Vue.extend({
  name: "index",
  components: {
    navigationBar,
    foot,
    right
  },
  data() {
    return {
      topShowImage: require("../assets/image/5_0_bg.png"), //顶部显示图片
      brandList: ["", "", "", "", "", "", "", ""], //选项列表
      titleOption_list: ["全部", "分类A", "分类B", "分类C", "分类D", "分类E"], //商品推荐标题选项
      currentIndex: 0, //商品推荐标题，选中当前分类选项
      commodityList: ["", "", "", "", "", "", "", "", "", ""], //商品推荐选项列表
      noticeList: [
        {
          title: "【公告】工品汇荣获“2019中国集采供应链优秀企业...",
          date: "2019-09-09"
        },
        {
          title: " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...",
          date: "2019-09-09"
        },
        { title: " 【公告】工品汇全国会员日—上海站", date: "2019-09-09" },
        {
          title: " 【公告】工品汇荣获“2019中国集采供应链优秀企业...",
          date: "2019-09-09"
        },
        {
          title: " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...",
          date: "2019-09-09"
        }
      ] //公告栏选项列表
    };
  },
  methods: {
    //   商品推荐分类选项
    switchover(i) {
      this.currentIndex = i;
    },
    // 点击精选品牌卡片跳转到品牌中心
    toBranddetail() {
      this.$router.push({ path: "/branddetail", name: "branddetail" });
    },
    toGoodsdetail() {
      this.$router.push({ path: "/goodsdetail", name: "goodsdetail" });
    },
    toNoticedetail() {
      this.$router.push({ path: "/noticedetail", name: "noticedetail" });
    }
  }
});
</script>
<style lang="scss" scoped>
// 精选品牌、商品推荐内容盒
@mixin contentBox {
  max-width: 1200px;
  min-width: 1020px;
  margin: 18px auto;
  background: white;
  padding: 10px 15px;
  box-sizing: border-box;
}
// 精选品牌、商品推荐标题
@mixin contentTitle {
  display: flex;
  justify-content: space-between;
  //   精选红色标题
  .titleColor {
    align-items: center;
    display: flex;
    & > h4 {
      color: #f03a58;
      font-size: 17px;
    }
    & > span {
      color: #5a5a5a;
      font-size: 15px;
      padding: 6px 0 4px 10px;
    }
  }
  //  查看更多
  .titleMore {
    font-size: 13px;
    padding-top: 26px;
  }
}
.section {
  min-width: 1020px;
  
  background: #f4f4f4;
  padding-bottom: 5px;
  //  顶部显示图片
  .showImage {
    max-width: 1920px;
    min-width: 1020px;
    height: 510px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 510px;
    }
  }
  // 精选品牌
  .brand {
    @include contentBox;
    //   标题
    .brand_title {
      @include contentTitle;
    }
    // 选项列表
    .brandList {
      padding-left: 4px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .brandOption {
        width: 280px;
        margin-right: 10px;
        height: 180px;

        border: 1px solid black;
        margin-bottom: 10px;
        position: relative;
        &:hover .filter {
          transition-duration: 2s;
          display: block;
        }
      }
    }
  }
  //商品推荐
  .commodity {
    @include contentBox;
    // 标题
    .commodity_title {
      @include contentTitle;
      .titleOption {
        margin-top: 24px;
        display: flex;
        .selectNape {
          // display: inline-block;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 8px;
          padding: 0 2px;
          border-radius: 20px;
          border: 1px solid #ccc;
          width: 45px;
          height: 23px;
          // line-height: 23px;
          font-size: 13px;
          cursor: pointer;
          color: #999;
        }
      }
    }
    // 商品列表
    .commodityList {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding-left: 30px;

      .productOption {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin: 20px 25px 0 0;
        position: relative;
        //   商品描述
        .describe {
          width: 100%;
          height: 60px;
          position: absolute;
          bottom: 0;
          color: white;
          font-size: 13px;
          text-align: start;
          padding: 5px;
          box-sizing: border-box;
          background: rgba(0, 0, 0, 0.5);
          & span:nth-of-type(1) {
            margin-right: 10px;
            font-size: 20px;
          }
        }
        // 商品标签
        .label {
          width: 60px;
          height: 22px;
          background: #f03a58;
          position: absolute;
          right: 0;
          top: 0;
          display: flex;
          align-items: center;
          justify-content: center;

          color: white;
          font-size: 12px;
        }
      }
    }
  }
  //   公告通知
  .notice {
    @include contentBox;
    // 标题
    .noticeTitle {
      @include contentTitle;
    }
    //  公告列表
    .noticeList {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // 公告选项
      .noticeOption {
        width: 46%;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        line-height: 20px;
        text-align: start;
        margin-bottom: 5px;
        & p:nth-of-type(1) {
          width: 80%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
  //   商品推荐选中当前样式
  .activeOption {
    color: white !important;
    background: #fe2c4a;
    border: none !important;
  }
  // 遮罩层
  .filter {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;

    display: none;
    // display: block;
    .examine {
      width: 60%;
      height: 60%;

      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 20%;
      left: 20%;
      padding: 10px 0;
      box-sizing: border-box;
      color: white;
      font-size: 15px;
      //红色跳转小方框
      .goexamine {
        display: inline-block;
        width: 90px;
        height: 28px;
        font-size: 12px;
        text-align: center;
        background: #f03a58;
        border-radius: 30px;
        line-height: 28px;
        margin-top: 16px;
      }
    }
  }
}
</style>
